<template>
  <div class="jsl-btn" :class="[props.type, props.size]">
    <slot>{{props.text}}</slot>
  </div>
</template>

<script setup>
import {defineProps} from 'vue'

/**
 *
 * @type {Prettify<Readonly<ExtractPropTypes<{size: {default: string, type: StringConstructor}, type: {default: string, type: StringConstructor}}>>>}
 * @description 通用按钮
 * @param type {'primary' | 'default' | 'clean'} 按钮主题
 * @param size {'max'| 'common'| 'min'} 大小
 * @return <component>
 */
const props = defineProps({
  type: {
    //'primary' | 'default' | 'clean'
    type: String,
    default: 'default'
  },
  size: {
    //'max'| 'common'| 'min'
    type: String,
    default: 'common',
  },
  text: {
    type: String,
    default: ''
  }
})
</script>

<style scoped lang="scss">
@import '../assets/style/var';
.jsl-btn{
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: fit-content;
  cursor: pointer;
}
/**大小相关**/
.common{
  padding: 0 16px;
  min-width: 150px;
  height: 40px;
}
.max{
  padding: 0 16px;
  min-width: 180px;
  height: 60px;
}
.min{
  padding: 0 8px;
  min-width: 75px;
  height: 30px;
}


/**主题**/
.default{
  border: 1px solid  $main-color;
  color: $main-color;
  &:active{
    background: $main-color;
    color: #fff;
    transition: all .5s;
  }
}
.primary{
  background: $main-color;
  color: #fff;
  &:active{
    background: #fff;
    color: $main-color;
    border: 1px solid  $main-color;
    transition: background .5s;
  }
}
.clean{
  background: #EEEEEE;
  color: #999999;
  &:active{
    background: #999999;
    color: #EEEEEE;
    transition: background .5s;
  }
}
</style>
